﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Library.aspx.cs" Inherits="HPIT_Library.Library" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles." />
    <meta name="author" content="Vincent Garreau" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" media="screen" href="sa-resources/login/style.css" />
    <script src="js/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="sa-resources/login/reset.css" />
    <link rel="stylesheet" href="static/sa.css" />
    <style type="text/css">
        /* 背景图片 */
        #particles-js {
            background-image: url(sa-resources/login/bg.jpg);
        }
        /* 样式调整 */
        .login-box {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            width: inherit;
            height: 100%;
            pointer-events: none;
        }

        .login {
            height: auto;
            padding: 50px 50px;
            position: static;
            margin: 0 auto !important;
            pointer-events: all;
        }

        .login-top {
            margin-top: 0px;
            margin-bottom: 30px;
        }

        .logo-img {
            width: 50px;
            height: 50px;
            vertical-align: middle;
            position: relative;
            top: -3px;
            border-radius: 50%;
            margin-left: -10px;
            margin-right: 10px;
        }

        .logo-img {
            display: none;
        }

        .login-button {
            width: 270px;
        }

        .sk-rotating-plane {
        }

        .login {
            opacity: 0;
        }
         /*验证码*/
        .code {
            border-style: none;
            border-color: inherit;
            border-width: 0;
            background-color: silver;
            font-family: Arial; /*设置字体*/
            font-style: initial;
            color: brown;
            font-size: 20px;
            padding: 2px 3px;
            letter-spacing: 3px;
            font-weight: bolder;
            width: 81px;
            height: 31px;
            margin-left: 60px;
            margin-top: 0px;
        }

        a {
            text-decoration: none;
            font-size: 12px;
            color: #288bc4;
        }

            a:hover {
                text-decoration: underline;
            }

        .yz {
            position: absolute;
            margin-left: 10px;
            margin-top: 5px;
            width: 70px;
        }

        .btttom {
            margin-left: -140px;
        }
    </style>
    <script>
        $(function () {

            $("#btn").click(function () {
                debugger;
                var name = $("#txt_Name").val();
                var password = $("#txt_Password").val();
                //----------------post方法---------------------------
                $.post("/LoginAjax.ashx", {Acount:"login", MyName: name, MyPwd: password }, function (msg) {

                    if (msg.State == -1) {
                        alert(msg.Message);
                    } else {
                        if (document.getElementById("YZ").value == "") {
                            alert("验证码不能为空！");
                            createCode();//输错一次或提交一次都将会刷新一次验证码
                            return false; //结束本次会话
                        } else if (document.getElementById("YZ").value.toUpperCase() != code.toUpperCase()) { //toUpperCase不区分大小写
                            alert("您输入的验证码有误，请重新输入！！");
                            createCode();//读取文件
                        }
                        else {
                            location.href = "Index.aspx";
                        }
                    }
                }, "json");
                //----------------get方法---------------------------
                //$.get("/LoginAjax.ashx", { MyName: name, MyPwd: password }, function (msg) {

                //    if (msg.State == -1) {
                //        $("#Label1").text(msg.Message);
                //    } else {
                //        location.href = "/index.aspx";
                //    }
                //},"json");
                //----------------getJson方法---------------------------
                //$.getJSON("/LoginAjax.ashx", { MyName: name, MyPwd: password }, function (msg) {

                //    if (msg.State == -1) {
                //        $("#Label1").text(msg.Message);
                //    } else {
                //        location.href = "/index.aspx";
                //    }
                //});
                //------------------原生get方法
                //$.get("/LoginAjax.ashx", { MyName: name, MyPwd: password }, function (msg) {
                //    var jsonObj = JSON.parse(msg);
                //    if (jsonObj.State == -1) {
                //        $("#Label1").text(jsonObj.Message);
                //    } else {
                //        location.href = "/index.aspx";
                //    }

                //});

            });

        })
    </script>
    <script language="javascript" type="text/javascript">
      
            var code;
            function createCode() {  //函数体
                code = "";
                var codeLength = 5; //验证码的长度
                var checkCode = document.getElementById("checkCode");
                var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
                    'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
                for (var i = 0; i < codeLength; i++) {
                    var charNum = Math.floor(Math.random() * 52);//设置随机产生
                    code += codeChars[charNum];
                }
                if (checkCode) {
                    checkCode.className = "code";
                    checkCode.innerHTML = code;
                }
            }


        
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="particles-js">
            <div class="login-box">
                <div class="login">
                    <div class="login-top">
                        <img src="" class="logo-img" alt="" />
                        <span class="page-title">登录</span>
                    </div>
                    <div class="login-center clearfix">
                        <div class="login-center-img">
                            <img src="sa-resources/login/name.png" /></div>
                        <div class="login-center-input">
                            <input type="text" id="txt_Name" name="key" runat="server" value="" placeholder="请输入账号" />
                            <div class="login-center-input-text">账号</div>
                        </div>
                    </div>
                    <div class="login-center clearfix">
                        <div class="login-center-img">
                            <img src="sa-resources/login/password.png" /></div>
                        <div class="login-center-input">
                            <input type="password" id="txt_Password" name="password" runat="server" value="" placeholder="请输入密码" />
                            <div class="login-center-input-text">密码</div>
                           
                        </div>
                    </div>

                     <div class="code" style="margin-left:100px;" id="checkCode" onclick="createCode()"></div><a style="margin-top:-10px; margin-left:-30px;"  class="yz" href="#" onclick="createCode()"> 换一张</a>
                    <img src="img/timg.jpg" style="width: 20px; height: 25px; margin-left:25px; margin-top:20px; "  />
                     &nbsp;<div class="login-center-input">
                       
                        <%--<label>验证码：</label>--%>
                          <input style="margin-left:60px; margin-top:20px;" id="YZ" name="yz" placeholder="请输入验证码"  />
                    </div>

                    <div>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                   <asp:Button ID="Button1" runat="server" CssClass="login-button" Text="ADO.NET登录" OnClick="Button1_Click" />

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input id="btn" type="button" value="Ajax登录"  class="login-button"  />
                        <br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <asp:Label ID="Label1" runat="server"></asp:Label>
                    </div>
                </div>
            </div>
            <div class="sk-rotating-plane"></div>
        </div>

        <!-- scripts -->
        <script src="sa-resources/login/particles.min.js"></script>
        <script src="sa-resources/login/app.js"></script>
        <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
        <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
        <script src="static/sa.js"></script>

        <script type="text/javascript">

            // 去掉透明
            setTimeout(function () {
                // document.querySelector('.login').style.backgroundColor = 'rgba(256,256,256,1)';
                document.querySelector('.login').style.opacity = '1';
            }, 0)
        </script>
    </form>
</body>
</html>
